<?php
/**
 *
 * @author 李大牛家的牛 (scafel@163.com)
 * @className banner.blade.php
 * @createDate 2025/8/5 - 13:15:35
 * @description
 **/
?>

@include('manage.default.template.header')
<div class="layui-fluid layui-anim-downbit" style="padding-top: 10px;">
    <div class="layui-card">
        <table class="layui-hide" id="website_banner_table" lay-filter="website_banner_table"></table>
        <script type="text/html" id="website_banner_table_toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">新增轮播图</button>
            </div>
        </script>
        <script type="text/html" id="website_banner_table_row_action">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>

    <div id="website_banner_add_form" style="display: none;">
        <div class="layui-fluid" style="padding-top: 10px;">
            <div class="layui-card">
                <form class="layui-form layui-form-pane" action="javascript:void(0);" method="post" lay-filter="website_banner_add_form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">轮播图标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltwb001" value="" lay-verify="required" placeholder="轮播图标题" lay-reqtext="请填写轮播图标题" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">轮播图描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltwb002" value="" lay-verify="required" placeholder="轮播图描述" lay-reqtext="请填写轮播图描述" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">轮播图图片</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="ltwb003" value="" id="website_banner_add_form_ltwb003_input">
                            <div class="layui-upload-drag" style="display: block;" id="website_banner_add_form_ltwb003">
                                <i class="layui-icon layui-icon-upload" id="website_banner_add_form_ltwb003_icon"></i>
                                <img src="" alt="轮播图图片上传成功后渲染" style="max-width: 90px; display: none;" id="website_banner_add_form_ltwb003_preview">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站导航</label>
                        <div class="layui-input-block">
                            <select name="ltwnCode" lay-search="" lay-verify="required" placeholder="网站导航" lay-reqtext="请填写网站导航">
                                @foreach($navigationList as $item)
                                    <option value="{{$item["code"]}}">{{$item["ltwn001"]}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="website_banner_add_form_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="website_banner_edit_form" style="display: none;">
        <div class="layui-fluid" style="padding-top: 10px;">
            <div class="layui-card">
                <form class="layui-form layui-form-pane" action="javascript:void(0);" method="post" lay-filter="website_banner_edit_form">
                    <input type="hidden" name="code" value="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">轮播图标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltwb001" value="" lay-verify="required" placeholder="轮播图标题" lay-reqtext="请填写轮播图标题" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">轮播图描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="ltwb002" value="" lay-verify="required" placeholder="轮播图描述" lay-reqtext="请填写轮播图描述" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">轮播图图片</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="ltwb003" value="" id="website_banner_edit_form_ltwb003_input">
                            <div class="layui-upload-drag" style="display: block;" id="website_banner_edit_form_ltwb003">
                                <img src="" alt="轮播图图片上传成功后渲染" style="max-width: 90px;" id="website_banner_edit_form_ltwb003_preview">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站导航</label>
                        <div class="layui-input-block">
                            <select name="ltwnCode" lay-search="" lay-verify="required" placeholder="网站导航" lay-reqtext="请填写网站导航">
                                @foreach($navigationList as $item)
                                    <option value="{{$item["code"]}}">{{$item["ltwn001"]}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="website_banner_edit_form_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@include('manage.default.template.footer')
<script>
    layui.use(['table', "form", 'interactive'], function () {
        var req = layui.interactive,
            $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            table = layui.table;
        table.render({
            elem:"#website_banner_table",
            url:"/manage/website/banner/data",
            toolbar:"#website_banner_table_toolbar",
            lineStyle: 'height: 65px;',
            height: 'full-30',
            cols: [[
                {field: "ltwb001", title: "标题",},
                {field: "ltwb002", title: "描述",},
                {field: "ltwb003", title: "图片", templet: function (field) {
                        return `<img src="${field.ltwb003}" style="width: 50px; height: 50px;" alt="头像">`;
                    }},
                {field: "status", title: "状态", templet: function (field) {
                        if (field.status === 1){
                            return '<span style="color: blue;" lay-event="status">已启用</span>';
                        }  else{
                            return '<span style="color: red;" lay-event="status">已禁用</span>';
                        }
                    }},
                {title: "操作", width: 250, align: "center", fixed: "right", toolbar: "#website_banner_table_row_action"}
            ]],
            page: true,
            limit: 20,
            limits: [20, 30, 50, 100],
            text: {none: '加载数据为空'},
            parseData: function(res){ // res 即为原始返回的数据
                return {
                    "code": res.code === 1 ? 0 : 1, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.count, // 解析数据长度
                    "data": res.data.data // 解析数据列表
                };
            },
        });
        table.on("tool(website_banner_table)",function (t) {
            const i = t.data;
            if (t.event === "edit"){
                layer.open({
                    type: 1,
                    title: "编辑轮播图",
                    content: $("#website_banner_edit_form"),
                    offset: '20%',
                    success: function (e) {
                        form.val("website_banner_edit_form", i);
                        $(`#website_banner_edit_form_ltwb003_preview`).attr('src',i.ltwb003);
                    }
                })
            }
            else if (t.event === "resetPassword"){
                layer.confirm("确定重置密码？重置后密码为 123456789", function(e) {
                    let url = `/manage/website/banner/${i.code}/password`;
                    req.get(url, {},function (res) {
                        layer.msg(res.msg);
                        layer.close(e)
                    })
                });
            }
            else if (t.event === "del"){
                layer.confirm("确定删除此项？", function(e) {
                    let url = `/manage/website/banner/${i.code}/delete`;
                    req.get(url, {},function (res) {
                        layer.msg(res.msg);
                        table.reload('website_banner_table'); //重载表格
                        layer.close(e)
                    })
                });
            }
            else if (t.event === "status"){
                var msg = "确定修改状态为";
                if(i.status === 0) {
                    msg += "启用吗？";
                }else {
                    msg += "禁用吗？";
                }
                layer.confirm(msg, function(e) {
                    let url = `/manage/website/banner/${i.code}/status`;
                    req.get(url, {} ,function (res) {
                        layer.msg(res.msg);
                        table.reload('website_banner_table'); //重载表格
                        layer.close(e);
                    })
                });
            }
            else{
                layer.msg("功能开发中");
            }
        });
        table.on("toolbar(website_banner_table)",function (t) {
            if (t.event === "add"){
                layer.open({
                    type: 1,
                    title: "新增轮播图",
                    content: $("#website_banner_add_form"),
                    offset: '20%',
                })
            }
        });

        // 提交事件
        form.on('submit(website_banner_add_form_submit)', function (data) {
            const field = data.field; // 获取表单字段值
            req.post("/manage/website/banner/add", field, function (res) {
                window.location.reload();
            })
            return false; // 阻止默认 form 跳转
        });
        // 提交事件
        form.on('submit(website_banner_edit_form_submit)', function (data) {
            const field = data.field; // 获取表单字段值
            req.post("/manage/website/banner/edit", field, function (res) {
                window.location.reload();
            })
            return false; // 阻止默认 form 跳转
        });

        req.upload(
            "website_banner_add_form_ltwb003",
            "/manage/upload/image",
            "website_banner",
            "gif|png|jpg",
        )
        req.upload(
            "website_banner_edit_form_ltwb003",
            "/manage/upload/image",
            "website_banner",
            "gif|png|jpg",
        )
    });
</script>

